<template>
  <view class="app-container">
    <image class="background" src="/static/images/background.jpg" mode="aspectFill"></image>

    <view class="main" @touchstart="handleTouchStart" @touchmove="handleTouchMove" @touchend="handleTouchEnd">
      <image class="hn" src="/static/images/hn.png" :style="'top:' + hn_top"></image>
      <image class="xdl" src="/static/images/xdl.png" :style="'top:' + xdl_top"></image>
      <view class="main-box" :class="{'expanded': isExpanded}">
        <!-- 主盒子内容 -->
        <swiper class="swiper" :style="'margin-top: ' + swiper_top" indicator-active-color="#F30B45" :indicator-dots="true" :autoplay="true" interval="3000" duration="500">
          <swiper-item v-for="(item, index) in banner_list" :key="index" @click="hrefObj(item.type, item.to_id)">
            <image :src="item.img" mode="aspectFill" class="slide-image"></image>
          </swiper-item>
        </swiper>

        <block v-if="isExpanded">
          <view class="recommend-box">
            <image class="text" src="/static/images/recommend.png"></image>
            <view class="more-box" @click="more">
              <view class="more-text">更多</view>
              <image class="icon" src="/static/images/more.png"></image>
            </view>
          </view>

          <view class="list-box" :style="'height: ' + list_box_height">
            <view class="box" @click="goUserDetail(item.id)" v-for="(item, index) in recommend_user_list" :key="index">
              <view class="left">
                <image class="avatar" mode="aspectFill" :src="item.avatar ? item.avatar : '/static/images/default_avatar.png'"></image>
                <view :class="['tag', item.gender == '男' ? 'nan' : '']">寻觅</view>
              </view>
              <view class="right">
                <view class="row" style="width: 130rpx">
                  <view class="text">{{ item.username }}</view>
                  <image class="sex" v-if="item.gender == '男'" src="/static/images/sex1.png"></image>
                  <image class="sex" v-else src="/static/images/sex2.png" style="width: 24rpx"></image>
                </view>
                <view class="row">
                  <view class="text">{{ item.residence }}</view>
                  <view class="text">{{ item.age }}岁</view>
                  <view class="text">{{ item.marital_status }}</view>
                </view>
                <view class="row" style="width: 320rpx">
                  <view class="text">{{ item.height }}cm</view>
                  <view class="text">{{ item.annual_income }}</view>
                </view>
                <view class="tag-box">
                  <view :class="['tag', item.gender == '男' ? 'nan' : '']" v-for="val in item.hobby">{{ val }}</view>
                </view>
                <view class="row">
                  <view class="yq-text">{{ item.requirement_marital_status ? item.requirement_marital_status : '' }}{{ item.requirement_age > 0 ? '，' + item.requirement_age : '' }}{{ item.requirement_height ? '，' + item.requirement_height : '' }}{{ item.requirement_annual_income ? '，' + item.requirement_annual_income : '' }}</view>
                </view>
              </view>
            </view>

          </view>
        </block>

      </view>
    </view>

    <CustomTabBar :tabList="tabList" :currentTab="currentTab" @change="changeTab"/>
  </view>
</template>

<script>
export default {
  data() {
    return {
      tabList: [],
      currentTab: '',
      isExpanded: false, // 控制盒子是否展开
      startY: 0, // 记录滑动开始的 Y 轴位置
      endY: 0, // 记录滑动结束的 Y 轴位置
      // 默认按照 devicePixelRatio === 3 来设置
      hn_top: '48vh',
      xdl_top: '56vh',
      swiper_top: '20%',
      list_box_height: '50%',
      // 默认按照 devicePixelRatio === 3 来设置
      banner_list: [],
      recommend_user_list: [],
      applet_version: -1
    };
  },
  created() {
    var tab_list = uni.getStorageSync('tab_list');
    if (tab_list) this.tabList = tab_list;

    this.getTabList(); // 获取 TabList
  },

  onLoad: function (options) {
    this.$http.post('/index/Api/getAppletVersion').then(res => {
      this.applet_version = parseInt(res.data.data);
    })

    var user_id = uni.getStorageSync('user_id') ? uni.getStorageSync('user_id') : 0,
      scene_user_id = options.scene ? options.scene : uni.getStorageSync('scene_user_id');// 分享人的user_id

    if (scene_user_id > 0) {
      uni.setStorageSync('scene_user_id', scene_user_id);
      if(user_id > 0){
        this.$http.post('/index/Api/bindUser', {user_id, scene_user_id}).then(res => {
          if (res.data.result === 1) {
            uni.removeStorageSync('scene_user_id', scene_user_id)
          }
        })
      }
    }

    let {devicePixelRatio} = uni.getSystemInfoSync();
    if (devicePixelRatio === 2) {
      this.swiper_top = '18%';
      this.list_box_height = '45%';
    }

    this.$http.post('/index/Api/indexBanner').then(res => {
      this.banner_list = res.data.data;
    });

    this.$http.post('/index/Api/indexRecommendUserList', {user_id}).then(res => {
      if (res.data.result === 1) {
        this.recommend_user_list = res.data.data
      }
    })
  },

  methods: {
    getTabList() {
      this.$http.post('/index/Api/getTabbar').then(res => {
        if(JSON.stringify(this.tabList) !== JSON.stringify(res.data.data)){
          uni.setStorageSync('tab_list', res.data.data);
          this.tabList = res.data.data;
        }
        // 默认选中的 Tab
        this.currentTab = this.tabList[0].path;
      });
    },
    changeTab(path) {
      this.currentTab = path;
      uni.redirectTo({url: path}); // 切换到指定的页面
    },
    handleTouchStart(event) {
      // 记录触摸开始的 Y 位置
      this.startY = event.touches[0].clientY;
    },
    handleTouchMove(event) {
      // 记录触摸过程中的 Y 位置，如果只是点击的话，该事件不会被触发
      this.endY = event.touches[0].clientY;
    },
    handleTouchEnd() {
      if(this.applet_version != 1) return false;

      const distance = Math.abs(this.startY - this.endY);

      if (!(distance < 50 || this.endY === 0)) {
        // 判断滑动的方向和距离，决定是否展开/收起
        if (this.startY - this.endY > 50) {
          this.isExpanded = true;
          this.hn_top = '8vh';
          this.xdl_top = '16vh';
        } else if (this.endY - this.startY > 50) {
          this.isExpanded = false;
          this.hn_top = '48vh';
          this.xdl_top = '56vh';
        }

        // 重置 startY 和 endY
        this.startY = 0;
        this.endY = 0;
      }
    },

    hrefObj: function (type, id) {
      if(type == 1){
        var url = '/pages/article/article?id=' + id;
      }else{
        var url = '/pages/service_detail/service_detail?id=' + id;
      }
      uni.navigateTo({
        url: url
      })
    },

    goUserDetail: function (user_id){
      uni.navigateTo({
        url: '/pages/user_details/user_details?user_id=' + user_id
      })
    },

    more: function () {
      uni.navigateTo({
        url: '/pages/search/search'
      })
    },
  }
};
</script>

<style lang="scss">
.app-container {
  .main {
    position: relative;
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* 盒子在页面底部 */
    align-items: center;
    z-index: 1;

    .hn {
      z-index: 1;
      position: absolute;
      right: 5%;
      width: 36%;
      height: 22%;
      transition: top 0.3s ease; /* 添加过渡效果 */
    }

    .xdl {
      z-index: 1;
      position: absolute;
      right: 42%;
      width: 50%;
      height: 10%;
      transition: top 0.3s ease; /* 添加过渡效果 */
    }

    .main-box {
      display: flex;
      align-items: center;
      flex-direction: column;
      width: 100%;
      height: 38vh; /* 白色主盒子的初始高度 */
      border-radius: 40rpx 40rpx 0 0;
      background: linear-gradient(to bottom, rgba(228, 67, 35, 0.8), rgba(216, 216, 216, 0.2));
      overflow: hidden;
      position: absolute;
      bottom: 0; /* 固定在页面底部 */
      transition: height 0.3s ease;

      .swiper {
        width: 86%;
        height: 240rpx; /* 设置轮播图高度 */
        border-radius: 40rpx; /* 设置圆角 */
        overflow: hidden; /* 确保子元素超出部分被隐藏 */

        .slide-image {
          width: 100%;
          height: 100%;
        }
      }

      .recommend-box {
        width: 86%;
        height: 80rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .text {
          width: 120rpx;
          height: 60rpx;
        }

        .more-box{
          display: flex;
          justify-content: space-between;
          align-items: center;
          background-color: #EDC80F;
          border-radius: 50rpx;
          width: 90rpx;
          height: 60rpx;
          padding: 0 20rpx;
          .more-text{
            font-size: 32rpx;
            font-weight: bold;
          }
          .icon {
            width: 14rpx;
            height: 24rpx;
          }
        }

      }

      .list-box {
        width: 86%;

        .box {
          display: flex;
          justify-content: space-between;
          padding: 14rpx;
          background: #fff;
          border-radius: 20rpx;
          margin-top: 20rpx;

          &:first-child {
            margin-top: 0;
          }

          .left {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
            min-width: 120rpx;

            .avatar {
              width: 120rpx;
              height: 120rpx;
              border-radius: 50%;
            }

            .tag {
              width: 80rpx;
              padding: 4rpx 0;
              background: #FCC2D3;
              border-radius: 10rpx;
              font-size: 28rpx;
              text-align: center;
            }

            .nan {
              background: #1B54F3;
              color: #fff;
            }
          }

          .right {
            display: flex;
            flex-direction: column;
            flex: 1;
            margin-left: 40rpx;

            .row {
              display: flex;
              justify-content: space-between;
              align-items: center;
              margin-bottom: 14rpx;

              &:last-child {
                margin-bottom: 0;
              }

              .text {
                font-size: 28rpx;
                font-weight: bold;
              }

              .sex {
                width: 30rpx;
                height: 30rpx;
              }

              .yq-text {
                font-size: 24rpx;
              }
            }


            .tag-box {
              display: flex;
              margin-bottom: 14rpx;

              .tag {
                padding: 4rpx 10rpx;
                background: #FCC2D3;
                border-radius: 10rpx;
                font-size: 24rpx;
                margin-right: 10rpx;

                &:last-child {
                  margin-right: 0;
                }
              }
              .nan {
                 background: #1B54F3;
                 color: #fff;
               }
            }
          }
        }
      }
    }

    .main-box.expanded {
      height: 78vh; /* 主盒子展开后的高度 */
    }
  }
}
</style>
